<template>
  <view class="home-page" :style="{ paddingTop: isInCylApp ? '88rpx' : '0' }">
    <!-- 完整标题栏 -->
    <view class="custom-header" :style="{ height: totalBarHeight + 'px' }">
      <!-- 状态栏区域 -->
      <view class="status-area" :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏区域 -->
      <view class="home-logo" :style="{ height: navBarHeight + 'px' }"></view>
    </view>
    <search-bar placeholder="搜索手机型号" @search="handleSearch" />
      <category-navigation :navigate-items="navigate" />
      <current-device 
      v-if="showProductInfo && showProductInfo.productId"
      :device-info="showProductInfo" @change-device="handleChangeDevice"
      @handle-device="handleDevice"
      />
      <advertisement-banner :banner="banner"/>
      <why-choose-us :features="loopData0" />
      <!-- <user-reviews :reviews="userReviews" /> -->
      <bottom-nav type='home' />
</view>
</template>

<script>
import { mapGetters } from 'vuex'

import { getHomeData } from '@/api'
import CategoryNavigation from './components/CategoryNavigation.vue'
import UserReviews from './components/UserReviews.vue'
import WhyChooseUs from './components/WhyChooseUs.vue'
import BottomNavigation from './components/BottomNavigation.vue'
import CurrentDevice from './components/CurrentDevice.vue'
import SearchBar from './components/SearchBar.vue'
import AdvertisementBanner from './components/AdvertisementBanner.vue'
import productEvaluateInfo from '@/mixins/productEvaluateInfo'
import { waitShowToast,urlJump } from '@/utils'
export default {
  components: {
    CategoryNavigation,
    UserReviews,
    WhyChooseUs,
    BottomNavigation,
    CurrentDevice,
    SearchBar,
    AdvertisementBanner
  },
  mixins: [productEvaluateInfo],
  computed: {
    ...mapGetters([
      'location', 'userInfo', 'systemInfo', 'geoLocation'
    ]),
    // 获取状态栏高度
    statusBarHeight() {
      return this.systemInfo.statusBarHeight || 0;
    },
    // 获取导航栏高度
    navBarHeight() {
      return 44; // 导航栏固定高度
    },
    // 获取完整标题栏高度（状态栏 + 导航栏）
    totalBarHeight() {
      return this.statusBarHeight + this.navBarHeight;
    }
  },
  data() {
    return {
      loopData0: [

      ],
      loopData1: new Array(1).fill({}),
      navItems: [
      ],
      currentDevice: {
        
      },
      token:"",
      scrollHeight: 0,
      banner: [],
      article: [],
      navigate: [],
      doorServiceList: [],
      userReviews: [],
      locationAddress:'深圳市',
      isInCylApp: false // 是否在 cylApp 中
    }
  },
  // 页面加载时调用
  onLoad() {
    // 检测是否在 cylApp 中
    this.checkIsInCylApp();
    // this.getLocation();
    this.loadHome()
  },
  onShow() {
    this.loadProductEvaluateInfo()
  },
	onShareAppMessage() {
		return {
			title: '出手鸭',
			path: '/pages/index/index',
		}
	},
	onShareTimeline() {
		return {
			title: '出手鸭',
		}
	},

  methods: {
    // 检测是否在 cylApp 中
    checkIsInCylApp() {
      const userAgent = navigator.userAgent || '';
      this.isInCylApp = userAgent.includes('cylApp');
      console.log('[Home] 是否在 cylApp 中:', this.isInCylApp, 'UserAgent:', userAgent);
    },
    
    // 获取首页数据
    loadHome() {
      try {
        getHomeData().then(({ data, code }) => {
          if (code === 200) {
            const {
              banner, article, navigate, serviceList, userReviews
            } = data
    console.log("=============>",banner)

            this.banner = banner || []
            this.article = article || []
            this.navigate = navigate || []
            this.doorServiceList = serviceList || []
            this.userReviews = userReviews || []
          }
        })
      } finally {
        uni.stopPullDownRefresh()
      }
    },

    // 处理更换机型事件
    handleChangeDevice() {
      // 这里添加更换机型的逻辑
      uni.navigateTo({
        url: '/pages/category/index'
      })
    },
    // 处理设备回收事件
    handleDevice() {
      // 这里添加设备回收的逻辑
      uni.navigateTo({
        url: '/pages/product/index?id=' + this.showProductInfo.productId
      })
    },

    // 处理搜索事件
    handleSearch() {
      // 跳转到搜索页面或者显示搜索结果
      uni.navigateTo({
        url: '/pages/search/index'
      })
    },
	// 获取当前位置
	async getLocation() {
     const res = await this.$store.dispatch('userLocation/getLocation', true)
      if (res.geoLocation) {
        this.locationAddress = res.geoLocation.city
      }
    },
  }
}
</script>

<style>
/* 完整标题栏容器 */
.custom-header {
  z-index: 9999;
  width: 100%;
}

/* 状态栏区域 */
.status-area {
  width: 100%;
}

/* 导航栏区域 */
.nav-area {
  width: 100%;
}

.home-page {
  background-color: rgba(246, 247, 249, 1);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: url(https://image.chushouya.com/assets/images/home/img_bg.png) no-repeat top,#F7F7F7;
  background-size: 100% 680rpx,100% 100%;
  padding: 0 32rpx 148rpx;
}

.home-position {
  height: 56rpx;
  width: fit-content;
  padding: 0 20rpx;
  border-radius: 32rpx;
  border: 2rpx solid rgba(0,0,0,0.08);
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
}

.home-position image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 4rpx;
}
.home-logo {
  width: 406rpx;
  height: 60rpx;
  background: url(https://image.chushouya.com/assets/images/home/home_logo.png?3333) left center no-repeat;
  background-size: 406rpx;
  /* #ifdef MP-ALIPAY */
  margin-left: 48rpx;
  /* #endif */
}
</style>